<template>
    <el-card class="admin-header">
        <a href="/index" width="55px">
            <img src="../../assets/img/icon/icon2.png" alt="" style="width:55px;float: left;margin-top: -5px;">
        </a>
        <span style="font-size: 32px;font-weight: bold;position:absolute;left: 100px">譚  卢</span>

        <el-icon @click="logout" style="font-size: 40px;float: right">
            <switch-button/>
        </el-icon>

    </el-card>
</template>

<script>
    import {SwitchButton} from '@element-plus/icons'
    import {getCurrentInstance} from "vue";

    export default {
        name: 'Header',
        components: {
            SwitchButton
        },
        setup() {
            let {proxy} = getCurrentInstance()

            function logout() {
                proxy.$axios.get('/logout').then(resp => {
                    if (resp && resp.data.code === 200) {
                        proxy.$store.commit('logout')
                        proxy.$router.replace('/index')
                        // 清空路由，防止路由重复加载
                        // const newRouter = createRouter()
                        // _this.$router.matcher = newRouter.matcher
                    }
                }).catch(failResponse => {
                    console.log(failResponse)
                })
            }
            return {
                logout
            }
        }

    }
</script>

<style scoped>
    .admin-header {
        height: 80px;
        opacity: 0.85;
        line-height: 40px;
        min-width: 900px;
    }

    .el-icon-switch-button {
        cursor: pointer;
        outline: 0;
    }
</style>
